<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./velocity.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" placeholder="请输入要查找的内容 " v-model="query" />
			<transition-group name="item" tag="ul" @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false">
				<li v-for="(item,index) in ComputedList" :key="item.msg" :data-index="index"> {{item.msg}} </li>
			</transition-group>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					query: '',
					items: [{
							msg: '张3'
						},
						{
							msg: '李四'
						},
						{
							msg: '张芳芳'
						},
						{
							msg: '卫宫士郎'
						},
						{
							msg: '王玲玲'
						},
						{
							msg: 'zxc'
						},
					]
				},
				computed: {
					ComputedList() {
						const vm = this.query
						const nameList = this.items
						
						return nameList.filter(item => item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1)
					}
				},
				methods:{
					beforeEnter(el){
						el.style.opacity =0
						el.style.height  = 0
					},
					enter(el,done){
						const delay = el.dataset.index *150
						setTimeout(()=>{
							Velocity(el,{opacity:1,height:'1.6em'},{complete:done})
						},delay)
					},
					leave(el,done){
						const delay = el.dataset.index *150
						setTimeout(()=>{
							Velocity(el,{opacity:0,height:0},{complete:done})
						},delay)
					}
				}
			})
		</script>
	</body>
</html>
